<!DOCTYPE html>
<html>
<head>
    <title>收款</title>
    [#include "/includes/header.html" /]
    [#include "/includes/scripts.html" /]
    <style>
        body {
            background-color: #f5f5f5;
            margin: 0;
        }

        .bindCard_dis {
            width: 100%;
            height: 50px;
            line-height: 50px;
            font-size: 16px;
            display: flex;
            justify-content: space-between;
            border-bottom: #f5f5f5;
            box-sizing: border-box;
            background-color: #fff;
        }

        .bindCard_dis_a {
            padding-left: 20px;
        }

        .bindCard_dis_a img {
            width: 24px;
            height: 24px;
            vertical-align: middle;
            margin-right: 10px;
        }

        .bindCard_dis_b {
            margin-right: 20px;
        }

        .bindCard_dis_b input {
            width: 200px;
            height: 50px;
            line-height: 50px;
            font-size: 16px;
            border: none;
            outline: none;
            text-align: right;
        }

        .bindCard_dis_b select {
            width: 200px;
            height: 50px;
            line-height: 50px;
            font-size: 16px;
            border: none;
            outline: none;
            text-align: right;
        }

        .mcht_btn {
            width: 90%;
            margin: 0 auto;
            height: 40px;
            line-height: 40px;
            border-radius: 5px;
        }
        .hid{
            width: 100%;
            height: 100%;
            position: absolute;
            background-color: rgba(0, 0, 0, 0.5);
            top: 0;
            display: none;
        }
    </style>
</head>
<body>


<div class="hid" onclick="hid()"></div>
<div class='fui-cell-group' style="margin-top: 3.5rem;">
    <div class='fui-cell'>
        <div class='fui-cell-info'
             style="width:100%;background-color:#fff;margin:3.6rem auto;padding-top:10px;padding-bottom: 20px;">
            <div class="bindCard_dis">
                <div class="bindCard_dis_a"><img src="money.png" alt="">金额</div>
                <div class="bindCard_dis_b"><input type="text" id="money" name="money" placeholder="请输入金额"></div>
            </div>
        </div>
    </div>
</div>
<div class="fui-cell-group fui-cell-click transparent" style="margin-top: 10px;">
    <div class="fui-cell external btn-logout" id='pay' onclick="createOrder()">
        <div class="fui-cell-text mcht_btn" style="text-align: center; color:#ffffff;background:#ff5555"><p onclick="show()">收款</p></div>
    </div>
</div>

<div id="qrcodeTable" style="width:200px;height:200px;position: absolute;top:200px;left:50%;margin-left: -100px;z-index: 99;display: none;"></div>
</body>
<script type="text/javascript">
    function createOrder() {
        var amt = $("#money").val();
        $.ajax({
            type: "POST",
            url: "${webctx}/trans/createOrder",
            contentType: "application/x-www-form-urlencoded; charset=utf-8",
            dataType: "json",
            data: {
                amt: amt
            },
            success: function (ret) {
                var trans_id = ret.data.trans_id;
                jQuery('#qrcodeTable').qrcode({
                    render: "table",
                    text: "http://localhost:8080/trans/payFrom?trans_id=" + trans_id
                });
            }
        })
    }
    function show(){
        $(".hid").show();
        $("#qrcodeTable").show();
    }
    function hid(){
        $(".hid").hide();
        $("#qrcodeTable").hide();
    }
</script>

